<template>
    <view class="dataLibraryDetails">
        <view class="goBack" @click="goBack">返回</view>
        <view class="details">
            <view class="left">
                <image :src="userInfo.avatarUrl" class="headerImg"></image>
                <view class="name">{{userInfo.name}}</view>
                <view class="info">
                    <view>年龄：{{userInfo.age ? userInfo.age : '未知'}}</view>
                    <view>生日: {{userInfo.birthday ? userInfo.birthday :'未知'}}</view>
                    <view>星座：{{userInfo.zodiacSign ? userInfo.zodiacSign :'未知'}}</view>
                    <view>血型：{{userInfo.bloodType ? userInfo.bloodType :'未知'}}型</view>
                    <view>职业：{{userInfo.occupation ? userInfo.occupation :'未知'}}</view>
                </view>
            </view>
            <view class="right">
                <view v-for="(item, i) in storyList" class="storyDetails">
                    <image :src="item.url" class="pic"></image>
                    <view class="cont">{{ item.content }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            storyList: [
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/title_bg4.png',
                    content: '第一章内容'
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/title_bg4.png',
                    content: '第二章内容'
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/title_bg4.png',
                    content: '第三章内容'
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/title_bg4.png',
                    content: '第四章内容'
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/title_bg4.png',
                    content: '第五章内容'
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/title_bg4.png',
                    content: '第六章内容'
                }
            ],
            userInfo: {}
        }
    },
    onLoad(options) {
        const item = JSON.parse(decodeURIComponent(options.id));
        this.userInfo = item;
        this.getmCharacterPlot(item.id)
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },

        getmCharacterPlot(id) {
            uni.request({
                url: this.configs.gameUrl + '/play/mCharacterPlot/queryList',
                method: 'GET',
                header: {
                    'X-Access-Token': this.configs.userToken // 在header中添加token
                },
                data: {
                    characterInfoId: id,
                    userId: this.configs.userId
                },
                success: data => {
                    console.log(data.data.result.records)

                },
                fail: (data, code) => { }
            });
        },
    },
    onShow() {
    }
}
</script>
<style scoped lang="less">
.dataLibraryDetails {
    width: 100%;
    height: 100vh;
    //背景从上到下紫色到淡紫色
    background: linear-gradient(180deg, #cc94e5 0%, #D3D3D3 100%);
    position: relative;

    .goBack {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 100rpx;
        height: 24rpx;
        //粉色背景
        background: #F8879C;
        border-radius: 12rpx;
        text-align: center;
        line-height: 24rpx;
        color: #fff;
        font-size: 14rpx;
    }

    .details {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;

        .left {
            width: 20%;

            .headerImg {
                width: 100%;
                height: 150rpx;
            }

            .name {
                font-size: 18rpx;
                text-align: center;
                margin-top: -20rpx;
                color: #c068e9;
                //白色阴影
                text-shadow: 0 0 10rpx #fff;
                position: relative;
                z-index: 3;
            }

            .info {
                margin-top: 14rpx;

                view {
                    margin-top: 6rpx;
                    font-size: 12rpx;
                    margin-top: 14rpx;
                    color: #c068e9;
                    padding-left: 30rpx;
                }
            }
        }

        .right {
            width: 70%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-right: 5%;
            height: 100%;
            overflow: scroll;

            .storyDetails {
                width: 30%;
                margin-top: -40rpx;

                .pic {
                    width: 100%;
                    height: 100rpx;
                    position: relative;
                    bottom: -50rpx;
                    //旋转45度
                    transform: rotate(10deg);
                }

                .cont {
                    font-size: 10rpx;
                    color: #c068e9;
                    height: 100rpx;
                    background: #fff;
                    border: 4rpx solid #c068e9;
                    border-radius: 10rpx;
                    padding: 50rpx 6rpx 0;
                    box-sizing: border-box;
                }
            }

            .storyDetails:nth-child(2n) {
                .pic {
                    transform: rotate(-10deg);
                }
            }
        }
    }


}
</style>